<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>16:9 工作流 - AI 图片</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <header>
      <h1>16:9 图片工作流</h1>
      <p class="sub">小图候选 → 精修 → 裁切标准化 → 放大/微调</p>
      <p style="margin-top:8px"><a href="/">返回简单模式</a></p>
    </header>

    <main>
      {% if error %}
      <section class="panel"><div class="error">{{ error }}</div></section>
      {% endif %}

      {% if step == 'start' %}
      <section class="panel">
        <form action="/workflow/start" method="post" class="form">
          <label for="prompt">提示词（强调 16:9 / 电影级构图 / 主体 / 镜头 / 光线 / 风格）</label>
          <textarea id="prompt" name="prompt" rows="5" placeholder="例如：Cinematic 16:9 wide shot ..." required>{{ prompt or '' }}</textarea>

          <div class="row">
            <label for="base_size">基准尺寸</label>
            <select id="base_size" name="base_size">
              <option value="1024x576" {% if base_size == '1024x576' %}selected{% endif %}>1024×576（快）</option>
              <option value="1280x720" {% if base_size == '1280x720' %}selected{% endif %}>1280×720（清晰）</option>
            </select>
          </div>

          <div class="row">
            <label for="n">候选数量</label>
            <input type="number" min="1" max="8" id="n" name="n" value="{{ n or 4 }}" />
          </div>

          <button type="submit">生成候选图</button>
        </form>
      </section>
      {% endif %}

      {% if step == 'select' %}
      <section class="panel">
        <form action="/workflow/process" method="post" class="form">
          <input type="hidden" name="prompt" value="{{ prompt }}" />
          <div class="grid">
            {% for url in candidates %}
            <label class="card" style="cursor:pointer">
              <img src="{{ url }}" alt="候选" />
              <figcaption style="padding:8px 10px">
                <input type="checkbox" name="selected" value="{{ url }}" /> 选择
              </figcaption>
            </label>
            {% endfor %}
          </div>

          <label for="refine_note">二次精修提示（保留构图/主体不变）</label>
          <textarea id="refine_note" name="refine_note" rows="3">{{ refine_note }}</textarea>

          <div class="row">
            <label for="target_res">标准化输出尺寸（16:9）</label>
            <select id="target_res" name="target_res">
              <option value="1920x1080" {% if target_res == '1920x1080' %}selected{% endif %}>1920×1080</option>
              <option value="2560x1440" {% if target_res == '2560x1440' %}selected{% endif %}>2560×1440</option>
            </select>
          </div>

          <div class="row">
            <label><input type="checkbox" name="do_upscale" checked /> 2× 放大</label>
            <label><input type="checkbox" name="do_sharpen" checked /> 轻度锐化与色彩微调</label>
          </div>

          <button type="submit">开始精修与导出</button>
        </form>
      </section>
      {% endif %}

      {% if step == 'final' %}
      <section class="panel">
        <h2>最终输出</h2>
        <div class="grid">
          {% for item in final_items %}
          <figure class="card">
            <img src="{{ item.url }}" alt="最终图" />
            <figcaption>
              <a href="{{ item.url }}" download>下载</a>
              {% if item.qa %}
              <div style="margin-top:6px; font-size:12px; color:#333; white-space:pre-wrap">建议：{{ item.qa }}</div>
              {% endif %}
            </figcaption>
          </figure>
          {% endfor %}
        </div>
        <p style="margin-top:12px"><a href="/workflow">再来一轮</a></p>
      </section>
      {% endif %}
    </main>
    <div id="lightbox" class="lightbox" aria-hidden="true">
      <button class="lb-close" aria-label="关闭">×</button>
      <img src="" alt="预览图" />
    </div>
    <script src="/static/lightbox.js"></script>
  </body>
  </html>
